<template>
  <form method="POST">
    <div>
      <!---->
      <div
        id="headlessui-tabs-panel-21"
        role="tabpanel"
        aria-labelledby="headlessui-tabs-tab-19"
        tabindex="0"
      >
        <input
          type="email"
          id="email"
          name="email"
          autocomplete="email"
          v-model="form.email"
          required=""
          placeholder="Please enter your email"
          class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
        />
        <p class="text-red-500 text-sm mt-1 absolute"></p>
      </div>
    </div>
    <div class="mt-5">
      <label for="code" class="block mb-2.5 leading-none">Code</label>
      <div class="md:flex md:space-x-2.5 space-y-5 md:space-y-0">
        <div class="flex-1">
          <input
            type="number"
            id="code"
            name="code"
            required=""
            v-model="form.code"
            placeholder="Please enter your code received from your email SMS message"
            class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
          />
          <p class="text-red-500 text-sm mt-1 absolute"></p>
        </div>
        <button
          type="button"
          :class="[
            'rounded no-underline border flex items-center justify-center text-black-85 border-yellow py-2 px-3 sm:px-4 text-xs sm:text-base flex-shrink-0 text-yellow min-w-[160px] h-full w-full md:w-auto',
            codeDisabled
              ? 'cursor-not-allowed bg-gray-light'
              : 'bg-transparent',
          ]"
          :disabled="codeDisabled"
          @click="getCode"
        >
          <div>{{ getCodeBtnText }}</div>
          <!---->
        </button>
      </div>
    </div>
    <div class="mt-5">
      <label for="password" class="block mb-2.5 leading-none">password</label>
      <div>
        <input
          type="password"
          id="password"
          name="password"
          autocomplete="current-password"
          required=""
          placeholder="Please enter your password"
          v-model="form.password"
          class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
        />
        <p class="text-red-500 text-sm mt-1 absolute"></p>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  props: ["value"],
  computed: {
    form: {
      set(value) {
        this.$emit("input", value);
      },
      get() {
        return this.value;
      },
    },
  },
  data() {
    return {
      getCodeBtnText: "Get Code",
      codeDisabled: false,
      times: null,
    };
  },
  methods: {
    getCode() {
      this.codeDisabled = true;
      this.countdown();
      this.$api
        .emsSend({
          email: this.form.email,
          event: "login",
        })
        .then((res) => {
          this.$notify({
            message: res.data.msg,
          });
          if (res.data.code != 1) {
            this.codeDisabled = false;
            clearInterval(this.times);
            this.getCodeBtnText = "Get Code";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    countdown() {
      let time = 60;
      this.getCodeBtnText = time + "s";
      this.times = setInterval(() => {
        if (time <= 0) {
          this.getCodeBtnText = "Get Code";
          this.codeDisabled = false;
          return;
        }
        this.getCodeBtnText = --time + "s";
      }, 1000);
    },
  },
};
</script>
